<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ztree</title>
		<script src="js/jquery-3.2.1.min.js"></script>、
		<script src="js/ztree/jquery.ztree.all.js"></script>
		<script src="js/ztree/jquery.ztree.core.js"></script>
		<script src="js/ztree/jquery.ztree.excheck.js"></script>
		<script src="js/ztree/jquery.ztree.exedit.js"></script>
		<script src="js/ztree/jquery.ztree.exhide.js"></script>
		<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" />
	</head>
	<script>
		var zTreeObj;
// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
var setting = {
		edit:{
			enable: true,
			drag:{
				isMove:true,
				prev:true,
				autoOpenTime: 0
			},
		editNameSelectAll: true,
		showRemoveBtn: true,
		removeTitle: "删除节点",
		renameTitle: "编辑节点名称",
		showRenameBtn: true,
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				nameKey: "name"
			}

		},
		view:{
			showLine:true,
			showIcon:true
		}

	};
		
		$(document).ready(function(){
			$.ajax({
				url:'ztree',
				type: "get",
				dataType: "json",
				success:function(data){
					//树形菜单初始化
					//alert(data);
					  zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,data);
				},
				error:function(xhr){
						alert(xhr.status);
				}
			});
		});
	</script>
	<body>dd
		<div id="treeDemo" class="ztree"></div>
	</body>
</html>
